<template>
  <div class="add">
    <el-form :model="form.evaluate" label-width="100px" :rules="form.rules" inline ref="form" size="small">
      <!-- 考评基本信息 -->
      <div class="evaluate">
        <div class="title-back">
          <div class="title">考评操作</div>
          <div class="back">
            <el-button size="small" @click="$router.go(-1)">返回</el-button>
          </div>
        </div>
        <div class="form">
          <el-form-item label="标题" prop="title">
            {{ form.evaluate.title }}
          </el-form-item>
          <el-form-item label="考评员" prop="user_id">
            {{ form.evaluate.user_name }}
          </el-form-item>
          <el-form-item label="街道" prop="street_id">
            {{ form.evaluate.street_name }}
          </el-form-item>
          <el-form-item label="考评时间" prop="time">
            <el-date-picker
              v-model="form.evaluate.time"
              type="date"
              placeholder="请选择"
              value-format="yyyy-MM-dd"
              v-if="getRole([0, 1], [0])"
            ></el-date-picker>
            <template v-else>{{ form.evaluate.time }}</template>
          </el-form-item>
          <el-form-item label="街道管理员">
            {{ form.evaluate.street_user_name }}
          </el-form-item>
          <el-form-item label="整改限时" prop="expire_time">
            <el-date-picker
              v-model="form.evaluate.expire_time"
              type="date"
              placeholder="请选择"
              value-format="yyyy-MM-dd"
              v-if="getRole([0, 1], [0, 1, 2, 3, 4, 5, 6, 7])"
            ></el-date-picker>
            <template v-else>{{ form.evaluate.expire_time }}</template>
          </el-form-item>
          <el-form-item label="村" prop="village_id">
            {{ form.evaluate.village_name }}
          </el-form-item>
          <el-form-item label="审核员" prop="auditor_id">
            {{ form.evaluate.auditor_name }}
          </el-form-item>
          <el-form-item label="村管理员">
            {{ form.evaluate.village_user_name }}
          </el-form-item>
        </div>
      </div>
      <div class="standard">
        <div class="title">细则</div>
        <div class="year-period">
          <el-form-item label="年份" prop="year">
            {{ form.evaluate.year }}
          </el-form-item>
          <el-form-item label="期数" prop="period">
            {{ form.evaluate.period }}
          </el-form-item>
          <!-- <el-form-item style="color: #909399">注 : 提交后,无法修改. 如有问题,请删除后,重新添加</el-form-item> -->
        </div>
        <div class="list">
          <div class="item" v-for="(standard, standardIndex) in standardList" :key="standard.id">
            <div class="title-score">
              <div class="title">{{ standardIndex + 1 }} : {{ standard.title }}</div>
              <div class="score">({{ standard.score }}分)</div>
            </div>
            <div class="content">{{ standard.content }}</div>
            <!-- 阶段0不可以上传整改照片 因为在此阶段开启和关闭整改 会导致问题数量计算出错  -->
            <div class="change" v-if="getRole([0, 1], [0])">
              <div class="label">开启整改 :</div>
              <el-switch
                active-color="#409EFF"
                inactive-color="#EAECF0"
                v-model="standard.state"
                :active-value="1"
                :inactive-value="0"
                @change="changeState(standard)"
              ></el-switch>
            </div>
            <div class="upload-issueSetting" v-if="standard.state && getRole([0, 1], [0, 1, 2, 3, 4, 5, 6, 7])">
              <uploads @file="uploadOld" :info="standardIndex" :data="{ compress: 1, thumb: 1 }"></uploads>
              <el-button
                type="primary"
                size="small"
                @click="
                  oneKeyIssue.list = standard;
                  oneKeyIssue.show = true;
                "
                >一键问题设置</el-button
              >
            </div>
            <div class="issue-list" v-if="standard.state">
              <div class="item" v-for="(issueImg, issueImgIndex) in standard.issue_img_list" :key="issueImg.img_before">
                <div class="img-message">
                  <div class="img">
                    <div class="old">
                      <div
                        class="bg"
                        :style="{ 'background-image': `url(${issueImg.img_before_thumb})` }"
                        @click="
                          img.show = true;
                          img.src = issueImg.img_before;
                        "
                      ></div>
                      <div class="label">{{ issueImg.img_before_title }}</div>
                    </div>
                    <div class="icon fa fa-arrows-h"></div>
                    <div class="new">
                      <template v-if="issueImg.img_after_thumb">
                        <div
                          class="bg"
                          :style="{ 'background-image': `url(${issueImg.img_after_thumb})` }"
                          @click="
                            img.show = true;
                            img.src = issueImg.img_after;
                          "
                        ></div>
                        <div
                          class="del fa fa-trash-o"
                          @click.stop="delNewIssueImg(issueImg)"
                          v-if="getRole([0, 1, 3, 4], [1, 2, 3, 4, 5, 6, 7]) && !getTimeOut()"
                        ></div>
                        <div class="label"></div>
                      </template>
                      <template v-else>
                        <!-- 管理员、考评员、街道和村管理员，除了0和8阶段、没有超时、并且问题是需要整改的 -->
                        <div class="bg" v-if="getRole([0, 1, 3, 4], [1, 2, 3, 4, 5, 6, 7]) && !getTimeOut() && issueImg.is_change == 1">
                          <upload
                            html="<span class='el-icon-plus avatar-uploader-icon'></span>"
                            @downFile="uploadNew"
                            :info="{ issueImg }"
                            :data="{ compress: 1, thumb: 1 }"
                          ></upload>
                        </div>
                        <div class="bg" v-else>
                          <div class="icon el-icon-plus avatar-uploader-icon"></div>
                        </div>
                        <div class="label"></div>
                      </template>
                    </div>
                  </div>
                  <div class="message">
                    <div class="header">
                      <div class="number">序号 : {{ issueImgIndex + 1 }}</div>
                      <div class="right">
                        <div class="is-change" v-if="getRole([0, 1], [0, 1, 2, 3, 4, 5, 6, 7])">
                          <el-switch
                            v-model="issueImg.is_change"
                            active-text="需要整改"
                            inactive-text="不需要整改"
                            :active-value="1"
                            :inactive-value="0"
                          >
                          </el-switch>
                        </div>
                        <div class="is-change no-change" v-if="!getRole([0, 1], [0, 1, 2, 3, 4, 5, 6, 7]) && issueImg.is_change == 0">不需要整改</div>

                        <div class="describe" v-if="getRole([0, 1], [0, 1, 2, 3, 4, 5, 6, 7])">
                          <el-select placeholder="请选择或搜索" filterable clearable size="small" v-model="issueImg.issue">
                            <el-option :label="item" :value="item" v-for="item in standard.issueList" :key="item"></el-option>
                          </el-select>
                        </div>
                        <el-tooltip effect="dark" :content="issueImg.issue" placement="top-start" v-else>
                          <div class="describe">
                            {{ issueImg.issue }}
                          </div>
                        </el-tooltip>
                        <!-- 修改考评员备注 -->
                        <div class="add-message" @click="editOldMessage(issueImg)" v-if="getRole([0, 1, 2], [0, 3])">
                          <i class="fa fa-pencil"></i>
                        </div>
                        <!-- 问题反馈 -->
                        <div class="add-message" @click="editNewMessage(issueImg)" v-if="getRole([0, 3, 4], [1, 2])">
                          <i class="fa fa-pencil"></i>
                        </div>
                        <div
                          class="delete-issue"
                          @click="delIssueImg(standard.issue_img_list, issueImgIndex)"
                          v-if="getRole([0, 1], [0, 1, 2, 3, 4, 5, 6, 7])"
                        >
                          <i class="fa fa-trash" style="color: #f40"></i>
                        </div>
                      </div>
                    </div>
                    <el-tooltip effect="dark" :content="issueImg.info_before" placement="top-start">
                      <div class="content">考评员 : {{ issueImg.info_before }}</div>
                    </el-tooltip>
                    <el-tooltip effect="dark" :content="issueImg.info_after" placement="top-start">
                      <div class="content">
                        问题反馈 : <span style="color: #f40">{{ issueImg.info_after }}</span>
                      </div>
                    </el-tooltip>
                  </div>
                </div>
                <!-- 问题需要整改才开启 -->
                <div class="check-state" v-if="issueImg.is_change == 1">
                  <div class="radio-note">
                    <div class="radio" v-if="getRole([0, 1, 2, 3], [4, 5, 6])">
                      <el-radio-group v-model="issueImg.check_state" size="small">
                        <el-radio-button :label="0">通过</el-radio-button>
                        <el-radio-button :label="1">不通过</el-radio-button>
                      </el-radio-group>
                    </div>
                    <div class="note" v-if="issueImg.check_state == 1">整改不通过</div>
                    <!-- <div class="note" v-if="issueImg.check_state == 0" style="color: #67c23a">整改通过</div> -->
                  </div>
                  <div class="no-pass-message" v-if="getRole([0, 1, 2, 3], [4, 5, 6])">
                    <el-input
                      autocomplete="off"
                      placeholder="原因"
                      size="small"
                      v-model="issueImg.check_info"
                      v-if="issueImg.check_state == 1"
                    ></el-input>
                  </div>
                  <div class="no-pass-message" v-if="!getRole([0, 1, 2, 3], [4, 5, 6]) && issueImg.check_info">理由 : {{ issueImg.check_info }}</div>
                </div>
              </div>
            </div>
            <div class="score-count">
              <div class="score" v-if="getRole([0, 1, 2], [0, 1, 2, 3, 4, 5, 6, 7, 8])">
                <p>
                  扣分 : <span>{{ standard.before_score }}</span>
                </p>
                <p>
                  得分 : <span>{{ parseFloat((standard.score - standard.before_score).toFixed(2)) }} </span>
                </p>
                <i class="fa fa-pencil" @click="editOldMinusScore(standard)" v-if="getRole([0, 1], [0, 1, 2, 3, 4, 5, 6, 7])"></i>
              </div>
              <!-- 占位 -->
              <div class="score" v-else></div>
              <div class="count">
                <p>
                  问题 : <span>{{ standard.issue_img_list.length }}</span>
                </p>
                <p>
                  整改 : <span>{{ getImgIssueChangeCount(standard.issue_img_list) }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sumScoreCount">
        <div class="item" v-if="getRole([0, 1, 2], [0, 1, 2, 3, 4, 5, 6, 7, 8])">
          <p>
            总分 : <span>{{ getStandardSumScore() }}</span>
          </p>
          <p>
            总得分 : <span>{{ getStandardSumGetScore() }}</span>
          </p>
        </div>
        <!-- 占位 -->
        <div class="item" v-else></div>
        <div class="item">
          <p>
            总问题 : <span>{{ getStandardIssueImgSum() }}</span>
          </p>
          <p>
            总整改 : <span>{{ getImgIssueChangeSumCount() }}</span>
          </p>
        </div>
      </div>
      <div class="submit">
        <div class="button">
          <!-- 管理员 -->
          <el-button size="small" type="primary" @click="submit" v-if="getRole([0], [0, 1, 2, 3, 4, 5, 6, 7])" :loading="form.loading"
            >保 存</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="submit(8)"
            v-if="getRole([0], [0, 1, 2, 3, 4, 5, 6, 7]) && getTimeOut()"
            :loading="form.loading"
            >结 束</el-button
          >
          <!-- 考评员 -->
          <el-button size="small" type="primary" @click="submit" v-if="getRole([1], [0, 1, 2, 3, 4, 5, 6, 7])" :loading="form.loading"
            >保 存</el-button
          >
          <el-button size="small" type="primary" @click="submit(1)" v-if="getRole([1], [0])" :loading="form.loading">提交整改</el-button>
          <el-button size="small" type="primary" @click="submit(6)" v-if="getRole([1], [5])" :loading="form.loading">提交审核员整改审核</el-button>
          <el-button size="small" type="primary" @click="submit(7)" v-if="getRole([1], [5])" :loading="form.loading">提交整改不通过</el-button>
          <!-- 审核员 -->
          <el-button size="small" type="primary" @click="submit" v-if="getRole([2], [6])" :loading="form.loading">保 存</el-button>
          <el-button size="small" type="primary" @click="submit(7)" v-if="getRole([2], [6])" :loading="form.loading">提交整改不通过</el-button>
          <el-button size="small" type="primary" @click="submit(8)" v-if="getRole([2], [6])" :loading="form.loading">结 束</el-button>
          <!-- 街道管理员 -->
          <el-button size="small" type="primary" @click="submit" v-if="getRole([3], [1, 2, 3, 4, 7])" :loading="form.loading">保 存</el-button>
          <el-button size="small" type="primary" @click="submit(3)" v-if="getRole([3], [2])" :loading="form.loading">提交初审不通过</el-button>
          <el-button size="small" type="primary" @click="submit(4)" v-if="getRole([3], [2])" :loading="form.loading">提交街道终审</el-button>
          <el-button size="small" type="primary" @click="submit(5)" v-if="getRole([3], [4])" :loading="form.loading">提交考评员整改审核</el-button>
          <el-button size="small" type="primary" @click="submit(7)" v-if="getRole([3], [4])" :loading="form.loading">提交整改不通过</el-button>
          <!-- 村管理员 -->
          <el-button size="small" type="primary" @click="submit" v-if="getRole([4], [1, 3, 7]) && !getTimeOut()" :loading="form.loading"
            >保 存</el-button
          >
          <el-button size="small" type="primary" @click="submit(2)" v-if="getRole([4], [1, 3, 7]) && !getTimeOut()" :loading="form.loading"
            >提交街道初审</el-button
          >

          <!-- 所有都有的 -->
          <el-button size="small" @click="$router.go(-1)">返 回</el-button>
        </div>
        <div class="time-out" v-if="getTimeOut()">考评已超时</div>
      </div>
    </el-form>

    <!-- 一键设置问题 -->
    <el-dialog title="操作" :visible.sync="oneKeyIssue.show" width="30%">
      <el-form :model="oneKeyIssue.list" ref="oneKeyIssue.list" size="small">
        <el-form-item label="问题列表 : " label-width="100px">
          <el-select v-model="oneKeyIssue.value" placeholder="请选择 (搜索 - 清空)" filterable size="small" style="width: 100%" clearable>
            <el-option :label="item" :value="item" v-for="(item, index) in oneKeyIssue.list.issueList" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitOneKeyIssue()" size="small">提 交</el-button>
        <el-button size="small" @click="oneKeyIssue.show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 图片预览 -->
    <el-dialog title="操作" :visible.sync="img.show" width="50%" class="img-show">
      <img :src="img.src" alt />
      <div
        class="down"
        @click="
          img.show = false;
          img.src = '';
        "
      >
        <i class="fa fa-times"></i>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import uploads from "@/components/other/uploads.vue";
import upload from "@/components/other/upload.vue";
export default {
  components: {
    uploads,
    upload,
  },
  data() {
    return {
      form: {
        evaluate: { period: "" },
        rules: {
          title: [{ required: true, message: "请输入标题", trigger: "blur" }],
          street_id: [{ required: true, message: "请选择街道", trigger: "change" }],
          village_id: [{ required: true, message: "请选择村", trigger: "change" }],
          street_user_name: [{ required: true, message: "街道管理员不能为空", trigger: "change" }],
          village_user_name: [{ required: true, message: "村管理员不能为空", trigger: "change" }],
          user_id: [{ required: true, message: "请选择考评员", trigger: "change" }],
          auditor_id: [{ required: true, message: "请选择审核员", trigger: "change" }],
          time: [{ required: true, message: "请选择考评时间", trigger: "change" }],
          expire_time: [{ required: true, message: "请选择整改限时", trigger: "change" }],
          year: [{ required: true, message: "请选择年份", trigger: "change" }],
          period: [{ required: true, message: "请选择期数", trigger: "change" }],
        },
        loading: false,
      },
      standardList: [], //标准列表
      // 一键问题设置
      oneKeyIssue: {
        show: false,
        list: [],
        value: "",
      },
      // 图片预览
      img: {
        show: false,
        src: "",
      },
    };
  },
  methods: {
    // 检查问题图片不通过状态下是否填写不通过理由
    checkImgIssueNoPassCheckInfo() {
      if (![4, 5, 6].includes(this.form.evaluate.state)) return true;

      // 只有4街道整改审核,5考评员整改审核,6审核员整改审核
      for (let i in this.standardList) {
        let standard = this.standardList[i];
        for (let j in standard["issue_img_list"]) {
          let issueImg = standard["issue_img_list"][j];
          // 不通过
          if (issueImg["check_state"] == 1 && issueImg["check_info"] == "") {
            this.common.message({ type: "error", message: standard.title + "下 , 序号 : " + (parseInt(j) + 1) + " , 不通过理由不能为空" });
            return false;
          }
        }
      }
      return true;
    },
    // 获取问题图片所有已整改通过统计
    getImgIssueChangeSumCount() {
      let count = 0;
      this.standardList.forEach((item) => {
        item.issue_img_list.forEach((item2) => {
          // 有整改照片和整改通过
          if (item2.img_after && item2.check_state == 0) count++;
        });
      });
      return count;
    },
    // 获取问题图片已整改通过统计
    getImgIssueChangeCount(imgIssueList) {
      let count = 0;
      imgIssueList.forEach((item) => {
        // 有整改照片和整改通过
        if (item.img_after && item.check_state == 0) count++;
      });
      return count;
    },
    // 判断是否超时
    getTimeOut() {
      return new Date().getTime() > new Date(this.form.evaluate.expire_time + " 23:59:59").getTime();
    },
    // 获取角色权限 userType用户类型 state考评状态 都是数组
    getRole(userTypes = [], states = []) {
      let userType = this.$store.state.user.type,
        state = this.form.evaluate.state;
      if (userTypes.includes(userType) && states.includes(state)) return true;
      else return false;
    },
    // 删除整改照片
    delNewIssueImg(issueImg) {
      this.common.confirm().then(() => {
        issueImg.img_after_thumb = "";
        issueImg.img_after = "";

        // 删除整改照片后 状态改为不通过
        issueImg.check_state = 1;
      });
    },
    // 修改问题反馈
    editNewMessage(issueImg) {
      this.$prompt("请输入内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        issueImg.info_after = value;
      });
    },
    // 上传整改照片
    uploadNew(img) {
      img.file.info.issueImg.img_after_thumb = img.file.thumb_path;
      img.file.info.issueImg.img_after = img.file.path;

      // 上传整改照片后 状态改为通过
      img.file.info.issueImg.check_state = 0;
    },
    // 设置一键问题
    submitOneKeyIssue() {
      if (this.oneKeyIssue.value) {
        this.oneKeyIssue.list.issue_img_list.forEach((item) => (item.issue = this.oneKeyIssue.value));
        this.oneKeyIssue.show = false;
        this.oneKeyIssue.value = "";
        this.oneKeyIssue.list = [];
        this.common.message({ message: "设置成功" });
      } else this.common.message({ type: "error", message: "问题不能为空" });
    },
    // 整改开关
    changeState(standard) {
      // 关闭整改
      if (standard.state == 0) standard.issue_img_list = [];
    },
    // 检查标准问题图片的具体内容是否填写
    checkStandardIssueImgIssueContent() {
      for (let i in this.standardList) {
        let standard = this.standardList[i];
        for (let j in standard["issue_img_list"]) {
          let issueImg = standard["issue_img_list"][j];
          if (!issueImg["issue"]) {
            this.common.message({ type: "error", message: standard.title + "下 , 序号 : " + (parseInt(j) + 1) + " , 问题不能为空" });
            return false;
          }
        }
      }
      return true;
    },
    // 提交
    submit(state) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = { ...this.form.evaluate };
          data.standard_list = this.standardList;
          // 检查问题图片是否选择具体问题、检查456阶段问题不通过是否填写不通过理由
          if (this.checkStandardIssueImgIssueContent() && this.checkImgIssueNoPassCheckInfo()) {
            this.form.loading = true;
            // 如果有修改状态
            if (state) data.state = state;
            this.axios.post("/admin/Index/edit_evaluate", data).then((res) => {
              res = res.data;
              this.common.message({ type: "success", message: res.info });
              setTimeout(() => {
                this.$router.go(-1);
                this.form.loading = false;
              }, 500);
            });
          }
        }
      });
    },
    // 获取所有标准问题图片总和
    getStandardIssueImgSum() {
      let sum = 0;
      this.standardList.forEach((item) => {
        sum = sum + item.issue_img_list.length;
      });
      return sum;
    },
    // 获取标准总得分
    getStandardSumGetScore() {
      let sum = 0;
      this.standardList.forEach((item) => {
        sum = sum + item.before_score;
      });
      // 保留两位小数
      return parseFloat((this.getStandardSumScore() - sum).toFixed(4));
    },
    // 获取标准总分
    getStandardSumScore() {
      let score = 0;
      this.standardList.forEach((item) => {
        score = score + item.score;
      });
      return score;
    },
    // 修改整改前扣分
    editOldMinusScore(standard) {
      this.$prompt("请输入扣分", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: standard.before_score,
        inputValidator: (value) => {
          if (!/^-?\d*\.?\d+$/.test(value)) return "只能输入整数或者小数";
          if (value > standard.score) return "分数已超,请检查,最高分为 : " + standard.score;
          if (value < 0) return "不能输入负数";
        },
      }).then(({ value }) => {
        standard.before_score = parseFloat(value);
      });
    },
    // 删除问题图片
    delIssueImg(issue_img_list, issueImgIndex) {
      this.common.confirm().then(() => {
        // 如果已经上传的 删除后台数据
        if (issue_img_list[issueImgIndex].id) {
          this.axios.post("/admin/Index/del_issue_img", { id: issue_img_list[issueImgIndex].id });
        }
        issue_img_list.splice(issueImgIndex, 1);
      });
    },
    // 修改整改前备注
    editOldMessage(issueImg) {
      this.$prompt("请输入内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        issueImg.info_before = value;
      });
    },
    // 上传实地照片
    uploadOld(img) {
      let standardIndex = img.info,
        imgList = img.list;

      // 设置问题图片
      imgList.forEach((img) => {
        let imgTitle = img.title.split(".");
        imgTitle.length = imgTitle.length - 1;
        imgTitle = imgTitle.join(".");

        let issue_img_list = this.standardList[standardIndex].issue_img_list;
        issue_img_list.push({
          img_before: img.path,
          img_before_thumb: img.thumb_path,
          img_before_title: imgTitle,
          info_before: "",
          issue: "",
          img_after: "",
          img_after_thumb: "",
          img_after_title: "",
          info_after: "",
          check_state: 1, //整改是否通过 默认不通过
          is_change: 1, //是否需要整改 默认需要
        });

        this.standardList[standardIndex].issue_img_list = issue_img_list;
      });
    },
    // 获取修改考评相关数据
    getEditEvaluateData() {
      this.axios.post("/admin/Index/get_edit_evaluate_data", { id: this.$route.query.id }).then((res) => {
        let data = res.data.data,
          standard = data.standard;
        delete data.standard;
        this.form.evaluate = data;

        standard.forEach((item) => {
          // 问题转数组
          item.issueList = item.issue.split(",");
        });
        this.standardList = standard;
      });
    },
  },
  created() {
    this.getEditEvaluateData();
  },
};
</script>

<style scoped>
.add .evaluate {
  background-color: #fff;
  border-radius: 6px;
  padding: 20px;
  padding-top: 10px;
}

.add .evaluate .title-back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.add .evaluate .title-back .title {
  font-size: 16px;
}

.add .evaluate .form {
  margin-top: 20px;
}

.add .evaluate .form .el-form-item {
  width: calc(50% - 20px);
}

.add .evaluate .form >>> .el-form-item .el-form-item__content {
  width: calc(100% - 100px);
}

.add .evaluate .form >>> .el-form-item .el-select,
.add .evaluate .form >>> .el-form-item .el-input {
  width: 100%;
}

.add .standard > .title {
  font-size: 16px;
  background-color: #fff;
  border-radius: 6px;
  padding: 10px;
  margin-top: 10px;
}

.add .standard .year-period {
  background-color: #fff;
  border-radius: 6px;
  padding: 15px 10px;
  margin-top: 10px;
}

.add .standard .year-period .el-form-item {
  margin-bottom: 0;
}

.add .standard > .list {
  margin-top: 20px;
}

.add .standard > .list > .item:nth-of-type(n + 2) {
  margin-top: 30px;
}

.add .standard > .list > .item .title-score {
  display: flex;
}

.add .standard > .list > .item .title-score .title {
  font-size: 16px;
}

.add .standard > .list > .item .title-score .score {
  color: #f40;
  margin-left: 20px;
  font-size: 16px;
}

.add .standard > .list > .item > .content {
  margin: 20px 0;
  line-height: 25px;
  color: #666;
  padding: 0;
}

.add .standard > .list > .item .change {
  margin-bottom: 10px;
}

.add .standard > .list > .item .change .label {
  color: #666;
  font-size: 13px;
  margin-bottom: 10px;
}

.add .standard > .list > .item .upload-issueSetting {
  padding: 20px 0;
  border-top: 1px solid #f3f5f7;
  display: flex;
}

.add .standard > .list > .item .upload-issueSetting > .el-button {
  margin-left: 10px;
}

.add .standard > .list > .item .issue-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.add .standard > .list > .item .issue-list .item {
  width: calc(50% - 20px);
  padding: 0;
}

.add .standard > .list > .item .issue-list .item:nth-of-type(n + 3) {
  border-top: 1px solid #eee;
  margin-top: 15px;
  padding-top: 15px;
}

.add .standard > .list > .item .issue-list .item .img-message {
  display: flex;
  justify-content: space-between;
}

.add .standard > .list > .item .issue-list .item .img-message .img {
  display: flex;
  align-items: center;
}

.add .standard > .list > .item .issue-list .item .img-message .img .new {
  position: relative;
}

.add .standard > .list > .item .issue-list .item .img-message .img .old .bg,
.add .standard > .list > .item .issue-list .item .img-message .img .new .bg {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  cursor: pointer;
}

.add .standard > .list > .item .issue-list .item .img-message .img .new .bg .icon {
  font-size: 30px;
  line-height: 100px;
  width: 100%;
  text-align: center;
}

.add .standard > .list > .item .issue-list .item .img-message .img .old .label,
.add .standard > .list > .item .issue-list .item .img-message .img .new .label {
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  font-weight: 700;
  width: 100px;
  height: 40px;
  overflow: hidden;
}

.add .standard > .list > .item .issue-list .item .img-message .img .new .del {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #fff;
  font-size: 18px;
  text-shadow: 2px 2px 3px #000;
  cursor: pointer;
}

.add .standard > .list > .item .issue-list .item .img-message .img .new .bg >>> .upload {
  margin-left: 0 !important;
  width: 100%;
}

.add .standard > .list > .item .issue-list .item .img-message .img .new .bg >>> .upload .el-upload {
  width: 100%;
}

.add .standard > .list > .item .issue-list .item .img-message .img .new .bg >>> .el-icon-plus {
  color: #666;
  font-size: 25px;
  line-height: 100px;
  display: block;
}

.add .standard > .list > .item .issue-list .item .img-message .img > .icon {
  font-size: 30px;
  width: 70px;
  text-align: center;
  margin-top: -20px;
}

.add .standard > .list > .item .issue-list .item .img-message .message {
  width: calc(100% - 300px);
}

.add .standard > .list > .item .issue-list .item .img-message .message .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add .standard > .list > .item .issue-list .item .img-message .message .header .right {
  display: flex;
  align-items: center;
}

.add .standard > .list > .item .issue-list .item .img-message .message .header .right .is-change {
  margin-right: 10px;
}
.add .standard > .list > .item .issue-list .item .img-message .message .header .right .is-change.no-change {
  color: #f40;
  margin-right: 20px;
}

.add .standard > .list > .item .issue-list .item .img-message .message .header .right .describe {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
  font-size: 13px;
}

.add .standard > .list > .item .issue-list .item .img-message .message .header .right .add-message,
.add .standard > .list > .item .issue-list .item .img-message .message .header .right .delete-issue {
  margin-left: 20px;
  font-size: 20px;
  cursor: pointer;
}

.add .standard > .list > .item .issue-list .item .img-message .message .content {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}

.add .standard > .list > .item .issue-list .item .check-state {
  margin-top: 10px;
}

.add .standard > .list > .item .issue-list .item .check-state .radio-note {
  display: flex;
  align-items: center;
}

.add .standard > .list > .item .issue-list .item .check-state .radio-note .radio {
  margin-right: 20px;
}

.add .standard > .list > .item .issue-list .item .check-state .radio-note .note {
  color: #f40;
  font-size: 13px;
}

.add .standard > .list > .item .issue-list .item .check-state .no-pass-message {
  margin-top: 10px;
}

.add .standard > .list > .item .score-count {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 5px;
}

.add .standard > .list > .item .score-count .score,
.add .standard > .list > .item .score-count .count {
  display: flex;
  font-size: 18px;
}

.add .standard > .list > .item .score-count .score p,
.add .standard > .list > .item .score-count .count p {
  font-size: 18px;
  margin: 0;
  margin-right: 20px;
}

.add .standard > .list > .item .score-count .score p span,
.add .standard > .list > .item .score-count .count p span {
  color: #f40;
  font-weight: bold;
  font-size: 18px;
}

.add .standard > .list > .item .score-count i {
  cursor: pointer;
}

.add .sumScoreCount {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 6px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 5px;
}

.add .sumScoreCount .item {
  display: flex;
  align-items: center;
  font-size: 20px;
}

.add .sumScoreCount .item p {
  margin: 0;
  font-size: 20px;
  margin-right: 20px;
}

.add .sumScoreCount .item p span {
  color: #f40;
  font-weight: bold;
  font-size: 20px;
}

.add .sumScoreCount .item i {
  cursor: pointer;
}

.add .submit {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add .submit .time-out {
  color: #f40;
  font-weight: bold;
}

/* 图片展示 */
.img-show >>> .el-dialog {
  border-radius: 5px;
  overflow: hidden;
}

.img-show >>> .el-dialog__body {
  position: relative;
  font-size: 0;
  padding: 0 !important;
  text-align: center;
}

.img-show >>> .el-dialog__header {
  display: none;
}

.img-show >>> .down {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}
</style>